<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue-钩子函数</title>
</head>
<body>
	<div id="app" @click="changemsg()">
		<p>{{ message }}</p>
	</div>

	<script type="text/javascript" src="js/vue/vue.js"></script>
	<script type="text/javascript">
			const vue = new Vue({
				el: '#app',
				data: {
					message: new Date(),
				},
				beforeCreate() {
					// 初始化事件 和 生命周期 
					console.group('beforeCreate 创建前状态===============》');
					// vm.$el 获取Vue实例挂载关联的DOM元素   $data   实例的data数据集 
					console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
					console.log("%c%s", "color:red", "data   : " + this.$data); //undefined 
					console.log("%c%s", "color:red", "message: " + this.message)
				},
				created() { // *** 
					console.group('created 创建完毕状态===============》');
					// 此时DOM还未渲染完成
					console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
					console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化 
					console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
				},
				beforeMount() {
					console.group('beforeMount 挂载前状态===============》');
					console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
					console.log(this.$el);
					console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化  
					console.log("%c%s", "color:red", "message: " + this.message); //已被初始化  
				},
				mounted() { // *** 
					console.group('mounted 挂载结束状态===============》');
					console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
					console.log(this.$el);
					console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
					console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 
				},
				beforeUpdate() {
					console.group('beforeUpdate 更新前状态===============》');
					console.log("%c%s", "color:red", "el     : " + this.$el);
					console.log(this.$el);
					console.log("%c%s", "color:red", "data   : " + this.$data);
					console.log("%c%s", "color:red", "message: " + this.message);
				},
				updated() {
					console.group('updated 更新完成状态===============》');
					console.log("%c%s", "color:red", "el     : " + this.$el);
					console.log(this.$el);
					console.log("%c%s", "color:red", "data   : " + this.$data);
					console.log("%c%s", "color:red", "message: " + this.message);
				},
				beforeDestroy() {
					console.group('beforeDestroy 销毁前状态===============》');
					console.log("%c%s", "color:red", "el     : " + this.$el);
					console.log(this.$el);
					console.log("%c%s", "color:red", "data   : " + this.$data);
					console.log("%c%s", "color:red", "message: " + this.message);
				},
				destroyed() {
					console.group('destroyed 销毁完成状态===============》');
					console.log("%c%s", "color:red", "el     : " + this.$el);
					console.log(this.$el);
					console.log("%c%s", "color:red", "data   : " + this.$data);
					console.log("%c%s", "color:red", "message: " + this.message);
				},
				methods: { // *** 
					changemsg() {
						this.message = "明天是周四吗？";
						console.group('点击事件时执行的方法===========》');
						console.log("%c%s", "color:red", "el     : " + this.$el);
						console.log(this.$el);
						console.log("%c%s", "color:red", "data   : " + this.$data);
						console.log("%c%s", "color:red", "message: " + this.message);
					},
				},
			})
		</script>
</body>
</html>